<template>
  <view class="c-sort-box" :class="{ active: currentActive }" @tap="onChange">
    {{ props.label }}
    <view
      class="c-caret"
      v-if="props.caret"
      :class="{
        up: !currentDesc,
        down: currentDesc
      }"
    >
      <view class="icon icon-caret-up-small"></view>
      <view class="icon icon-caret-down-small"></view>
    </view>
    <view v-else-if="slots.icon || props.icon" class="next">
      <slot v-if="slots.icon" name="icon"></slot>
      <c-icon v-else :icon="props.icon"></c-icon>
    </view>
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';
import { anyType } from '@/hooks';
import { computed, inject, ref, watch } from 'vue';
import { CIcon } from '.';
import { useUnload } from '@tarojs/taro';
import { sortKey } from '@/constants';

const sort = inject(sortKey);

const props = defineProps({
  label: String,
  disabled: Boolean,
  active: Boolean,
  icon: String,
  alone: Boolean,
  activeColor: {
    type: String,
    default: 'var(--color-primary)'
  },
  value: anyType(null),
  caret: Boolean,
  desc: Boolean
});
const modelDesc = ref(props.desc);
const emit = defineEmits(['change', 'tap']);

const slots = defineSlots();
const currentActive = computed(() => {
  if (props.disabled) return;
  if (props.alone) return props.active;
  if (sort) {
    return props.value === sort.modelValue.value;
  }
  return props.active;
});

const currentDesc = computed(() => {
  if (props.disabled) return;
  if (props.alone) return modelDesc.value;
  return modelDesc.value;
});

const currentColor = computed(() => {
  return props.activeColor;
});

const onChange = e => {
  if (props.disabled) return;
  emit('tap', e);
  if (sort && !props.alone) {
    if (sort.modelValue.value !== props.value) {
      sort.modelValue.value = props.value;
      sort.onChange();
    } else if (props.caret) {
      modelDesc.value = !modelDesc.value;
      sort.modelDesc.value = modelDesc.value;
      sort.onChange();
    }
  } else {
    emit('change', {
      value: props.value,
      active: props.active,
      desc: modelDesc.value
    });
  }
};

const unwatch = watch(
  () => props.desc,
  () => {
    modelDesc.value = props.desc;
  }
);

useUnload(() => {
  unwatch();
});
</script>
<style lang="scss">
.c-sort-box {
  padding: 0 15px;
  font-size: 26px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  --color-active: v-bind(currentColor);
  --color-caret: var(--color-gray);

  &.active {
    color: var(--color-active);
    --color-caret: var(--color-active);
  }
  .next {
    margin-left: 5px;
    transform: translateY(2px);
    display: inline-flex;
    align-items: center;
  }
  .c-caret {
    display: block;
    margin-left: 5px;

    .icon {
      display: block;
      margin-top: -12px;
      transform: translateY(8px);
      color: var(--color-gray);
    }

    &.down .icon:last-of-type {
      color: var(--color-caret);
    }

    &.up .icon:first-of-type {
      color: var(--color-caret);
    }
  }
}
</style>
